<template>
    <div>
        <h3>欢迎你，{{user.username}}</h3>

        <el-input v-model="query.title" style="width: 200px" clearable placeholder="标题模糊查询"></el-input>

        <el-select v-model="query.typeId" placeholder="请选择类型" clearable>
            <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
        <el-select v-model="query.xueliId" placeholder="请选择学历" clearable>
            <el-option
                    v-for="item in xueliList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
        <el-select v-model="query.salary" placeholder="薪资范围，默认" clearable>
            <el-option label="1W以下" value="1"></el-option>
            <el-option label="1W-3W" value="2"></el-option>
            <el-option label="3W以上" value="3"></el-option>
        </el-select>
        <el-select v-model="query.timeType" placeholder="发布日期，默认" clearable>
            <el-option label="3天之内" value="1"></el-option>
            <el-option label="7天之内" value="2"></el-option>
            <el-option label="15天之内" value="3"></el-option>
            <el-option label="30天之内" value="4"></el-option>
        </el-select>

        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题">
            </el-table-column>
            <el-table-column
                    prop="typeName"
                    label="类型">
            </el-table-column>
            <el-table-column
                    prop="workYears"
                    label="工作年限">
            </el-table-column>
            <el-table-column
                    prop="salary"
                    label="薪资">
            </el-table-column>
            <el-table-column
                    label="工作地点">
                <template slot-scope="scope">
                    {{scope.row.shengName}}-{{scope.row.shiName}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="nums"
                    label="人数">
            </el-table-column>
            <el-table-column
                    prop="xueliName"
                    label="学历">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="录入日期">
            </el-table-column>
            <el-table-column
                    prop="welfare"
                    label="标签">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="状态">
            </el-table-column>

            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button size="small">聊一聊</el-button>
                    <el-button type="success" size="small" @click="toudijianli(scope.row.id)">投递简历</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>


        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="60%">
            <span>{{currentDetail}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
        </el-dialog>


        <el-dialog title="发布需求" :visible.sync="dialogFormVisible">
            <el-form :model="form" :label-width="formLabelWidth">

                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="学历">
                    <el-select v-model="form.xueliId" placeholder="请选择学历">
                        <el-option
                                v-for="item in xueliList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位类型">
                    <el-select v-model="form.typeId" placeholder="请选择职位类型">
                        <el-option
                                v-for="item in typeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作经验">
                    <el-input v-model="form.workYears" type="number">
                        <template slot="append">
                            <span>年</span>
                        </template>
                    </el-input>
                </el-form-item>


                <el-form-item label="薪资">
                    <el-input v-model="form.salary" type="number"></el-input>
                </el-form-item>

                <el-form-item label="工作地点">
                    <el-col :span="11">
                        <el-select v-model="form.shengId" placeholder="请选择省" @change="findShiList">
                            <el-option
                                    v-for="item in shengList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-select v-model="form.shiId" placeholder="请选择市">
                            <el-option
                                    v-for="item in shiList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>


                <el-form-item label="招聘人数">
                    <el-input v-model="form.nums" type="number"></el-input>
                </el-form-item>

                <el-form-item label="公司福利">
                    <el-checkbox-group v-model="welfareArray">
                        <el-checkbox label="996" name="type"></el-checkbox>
                        <el-checkbox label="18薪" name="type"></el-checkbox>
                        <el-checkbox label="节日祝福" name="type"></el-checkbox>
                        <el-checkbox label="007" name="type"></el-checkbox>
                        <el-checkbox label="五险一金" name="type"></el-checkbox>
                        <el-checkbox label="全年无休" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>



                <el-form-item label="职位要求">
                    <el-input v-model="form.requireInfo" type="textarea"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addInfo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "infoList",
        data(){
            return {
                user:{},
                tableData:[],
                total:0,
                query:{
                    typeId:"",
                    page:1,
                    pageSize:2,
                    //新增的查询字段
                    title:"",
                    state:"招聘中",
                    xueliId:"",
                    salary:"",//1(1W一下) 2(1-3W) 3(3W以上)
                    timeType:"",//""-不限，1-3天以内，2-7以内，3-15天之内，4-30天之内
                },
                typeList:[],

                //详情需要的参数
                dialogVisible:false,
                currentDetail:"",

                //表单需要的参数
                dialogFormVisible: false,
                form: {
                    title:"",
                    typeId:"",
                    xueliId:"",
                    workYears:"",
                    salary:"",
                    shengId:"",
                    shiId:"",
                    nums:"",
                    welfare:"",
                    requireInfo:"",
                    createUserId:"",
                    state:"",
                },
                welfareArray:[],
                formLabelWidth: '120px',
                xueliList:[],
                shengList:[],
                shiList:[],

            }
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },
        methods:{
            toudijianli(rid){
                let obj = {
                    uid:this.user.id,
                    rid
                }
                this.axios.post("/zhaopinmy/recruit-deliver/add",obj).then(res=>{
                    this.$message.success("操作成功")
                })

            },
            changeState(id,state){
                let obj = {id,state}
                this.axios.post("/zhaopininfo/recruit-info/update",obj).then(res=>{
                    this.$message.success("操作成功")
                    this.initData();
                })


            },
            addInfo(){
                this.form.createUserId = this.user.id;
                this.form.state = "招聘中";
                this.form.welfare = this.welfareArray.join(",");
                this.axios.post("/zhaopininfo/recruit-info/add",this.form).then(res=>{
                    this.$message.success("发布成功")
                    this.form =  {
                        title:"",
                        typeId:"",
                        xueliId:"",
                        workYears:"",
                        salary:"",
                        shengId:"",
                        shiId:"",
                        nums:"",
                        welfare:"",
                        requireInfo:"",
                        createUserId:"",
                        state:"",
                    }
                    this.welfareArray = []
                    this.initData()
                    this.dialogFormVisible = false;
                })

            },
            findShiList(shengId){
                this.form.shiId = "";
                this.axios.post("/zhaopindic/city/findByPid?pid="+shengId).then(res=>{
                    this.shiList = res.data.data;
                })
            },
            toAdd(){
                this.dialogFormVisible = true
            },
            showDetail(d){
                this.currentDetail = d;
                this.dialogVisible = true;
            },
            handleSizeChange(val) {
                this.query.pageSize = val;
            },
            handleCurrentChange(val) {
                this.query.page = val;
            },
            initData(){
                this.axios.post(`/zhaopininfo/recruit-info/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`,this.query).then(res=>{

                    let myresult = res.data;

                    this.tableData = myresult.data.records;
                    this.total = myresult.data.total;

                    if(this.tableData.length==0&&this.query.page>1){
                        this.query.page--
                    }

                })

            },
            initTypelist(){
                this.axios.post("/zhaopindic/dic/findByType?type=1").then(res=>{
                    this.typeList = res.data.data;
                })
            },
            initxuelilist(){
                this.axios.post("/zhaopindic/dic/findByType?type=2").then(res=>{
                    this.xueliList = res.data.data;
                })
            },
            initSehnglist(){
                this.axios.post("/zhaopindic/city/findByPid?pid=0").then(res=>{
                    this.shengList = res.data.data;
                })
            }
        },
        created(){
            let user = localStorage.getItem("zhaopin_user");
            if(!user){
                this.$message.error("请先去登录")
                setTimeout(()=>{
                    this.$router.push("/")
                },1500)
            }else{
                this.user = JSON.parse(user);
                this.initData();
                this.initTypelist()
                this.initxuelilist();
                this.initSehnglist();
            }

        }
    }
</script>

<style scoped>

</style>
